<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新用户注册 - ${site.name}</title>
    <script src="${resSys}/jquery.js" type="text/javascript"></script>
    <script src="${resSys}/front.js" type="text/javascript"></script>

    <script type="text/javascript" src="${resSys}/TimerButton.js"></script>
    <link type="text/css" rel="stylesheet" href="/${res}/css/index.css" />

<!--[if lt IE 9]>
<script src="/${res}/js/html5shiv.min.js"></script>
<script src="/${res}/js/respond.min.js"></script>
<![endif]-->

<script type="text/javascript">
    $(function() {
        $("#getSmCode1").attr("disabled", true);
        $("#jvForm").validate();
       $("#guestbookCaptcha").bind("click", function(){
         $(this).attr("src","${base}/captcha.svl?d="+Math.random());
       });
    });

    function refreshCaptcha() {
        $("#guestbookCaptcha").attr("src","${base}/captcha.svl?d="+Math.random());
        $.ajax({
            url: "${base}/phone_exists.jspx",
            type: "POST",
            dataType:"json",
            data: {username : $("#username").val()},
            success: function (data) {
                $("#username").parent().find("label").remove();
                if(data.flag){
                    var str = $("<label for=\"username\" generated=\"true\" class=\"error\">该手机号码未注册</label>");
                    $("#username").parent().append(str); //将动态创建的str元素追加到ul下面
                }else{
                    $("#getSmCode1").attr("disabled", false);
                }
            }
        });
    }
    
</script>
    <script type="text/javascript">
        $(function (){
            /*TimerButton是一个对象，该对象中有两个方法，一个是SecondCountDown，该方法的作用是精确倒计时。普通的使用setInterval倒计时会存在一定的偏差，特别是当我们切换窗口时，而SecondCountDown解决了这个误差问题（具体用法见timedown.html）。
            另一个方法是verify，该方法的作用是实现按钮倒计时的功能，有了这个按钮倒计时就可以实现获取验证码倒计时的功能*/
            console.log(timerButton);

            var btn = $("#getSmCode1");
            timerButton.verify_("#getSmCode1", {
                time: 60,//倒计时时间
                event: "click",//事件触发方式
                //执行条件，可以是function也可以是Boolean值，如果是函数则需返回true才会执行
                condition: function () {
                    var phoneReg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9{1}]))+\d{8})$/,
                        flag = phoneReg.test($("#username").val());
                    if(!flag){
                        //alert("电话号码填写不正确！");
                        //$("#username").parent().append('电话号码填写不正确');
                        var str = $("<label for=\"username\" generated=\"true\" class=\"error\">电话号码为空或者格式填写不正确</label>");
                        $("#username").parent().append(str); //将动态创建的str元素追加到ul下面
                        return false;
                    }
                    return true;
                },
                unableClass: "unabled",//按钮不能使用时的class
                runningText: " s后重新获取",//计时正在进行中时按钮显示的文字
                timeUpText: "重新获取",//时间到了时按钮显示的文字
                progress: function (time) {//计时正在进行中时的回调
                    btn.html(time + " s后重新获取");
                    console.log(this);//这里的this指向按钮
                    console.log(this.timedown);//这个timedown就是计时器
                },
                timeUp: function (time) {//计时结束时执行的回调
                    btn.html("重新获取");
                    console.log("时间到了！");
                    console.log(this);//这里的this指向按钮
                },
                abort: function () {//中断计时
                    btn.html("重新获取");
                    console.log("我被中断了！");
                    console.log(this);//这里的this指向按钮
                },
                eventFn: function () {//事件执行后的回调
                    console.log(this);
                    console.log("执行了");
                    $.ajax({
                        url: "${base}/smCode_validate.jspx",
                        type: "POST",
                        dataType:"json",
                        data: {phone : $("#username").val(), smType: "1"},
                        success: function (data) {
                            $("#validateCode").val(data.smCode);
                        }
                    });
                    console.log(this);//这里的this指向按钮
                }
            });

        });
    </script>
<style type="text/css">
    .sm_button{
        color: white;
        width: 150px;
        height: 36px;
        background-color: #f94d4d;
        cursor: pointer;
    }
</style>
</head>

<body style="background-color:#f7f7f7;">
[#include "../include/top.html"/]
[#include "../include/header.html"/] 
<div class="register-box"> 
  <div class="register-nav"><span>注册</span><div class="register-login">已有账号，<a class="tc" href="${base}/login.jspx">马上登录 ></a></div></div> 
  <form id="jvForm" action="${base}/register.jspx" method="post">
  <div class="register-list">
    <ul>
      <li><span>手机号</span><input type="text" id="username" onchange="refreshCaptcha()" vld="{required:true,rangelength:[${site.usernameMinLen},12],username:true,remote:'phone_unique.jspx',messages:{remote:'手机号已存在'}}" name="username" placeholder="11位手机号码" class="register-input" /></li>
      <li>
            <span>短信验证码</span><input type="text" id="smCode" maxlength="8" style="width: 150px;" name="smCode" vld="{required:true}" placeholder="请输入短信验证码" class="register-input" />
          <!--<a id="getSmCode1" maxlength="8" class="sm_button" >获取短信验证码</a>-->
            <button id="getSmCode1" maxlength="8" class="sm_button" >获取短信验证码</button>
            <input type="hidden" id="validateCode" name="validateCode"/>
      </li>
      <li><span>设置密码</span><input id="password" type="password" name="loginPassword" vld="{required:true,rangelength:[${site.passwordMinLen},20]}" class="register-input" /></li>
      <li><span>确认密码</span><input type="password" equalto="#password" vld="{required:true,rangelength:[${site.passwordMinLen},20]}" class="register-input" /></li>
      <li><span>验证码</span><input type="text" maxlength="20" name="captcha" class="register-input register-code" /><i class="code-img"><img id="guestbookCaptcha"   alt="" src="${base}/captcha.svl"></i></li>
      <li class="register-txt"><input type="checkbox" class="register-checkbox" />我已阅读并接受<a>《JEECMS注册协议》</a></li>
      <li class="register-btn">
      <input type="hidden" name="token"  value="${token!}" />
      <input type="submit" id="regBtn" name="register" value="立即注册" />
      </li>
    </ul>
  </div>
  </form>
</div>
[#include "../include/footer.html"/]
[#include "../include/right-fixed.html"/]
</body>
</html>
